
<template>
	<view style="height: 100%;" class="wrap">
		<u-navbar
			title="订单管理"
			@rightClick="rightClick"
			:autoBack="true"
		>
		</u-navbar>
		<view class="tabs_box" style="position:sticky;top: 68px;">
			<u-tabs 
			activeColor="rgb(84,188,189)" 
			ref="tabs" 
			:list="list" 
			:current="current" 
			@change="change" 
			:is-scroll="false" 
			swiperWidth="750"
			>
			</u-tabs>
		</view>
		<view class="box" >
			<swiper class="swiper-box" :current="current" :indicator-dots="false" :autoplay="false" style="height: 100%;" >
				<swiper-item class="swiper-item" catchtouchmove="stopTouchMove">
					<scroll-view scroll-y style="height: 100%;width: 100%;" >
						<view class="page-box">
							<view class="order" v-for="(res, index) in dataList" :key="res.id">
								<view class="top">
									<view class="left">
										<view class="orderID">订单号：{{ res.orderID }}</view>
									</view>
									<view class="right">{{ res.deal }}</view>
								</view>
								
								<view class="mid">
									<view class="left"><image :src="res.goodsUrl" mode="aspectFill"></image></view>
									<view class="content">
										<view class="title u-line-2">{{ res.title }}</view>
										<view class="describe">{{ res.describe }}</view>
										<view class="bookingTime">预约时间 {{ res.bookingTime }}</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{(res.price) }}
										</view>
										<view class="total">合计:
											<text class="total-price">
												￥{{((res.price)) }}
											</text>
										</view>
									</view>
									
								</view>
								
								<view class="bottom">
									<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
									<view class="exchange btn">再来一单</view>
									<view class="evaluate btn">查看详情</view>
								</view>
							</view>
							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>			
				<swiper-item class="swiper-item" catchtouchmove="stopTouchMove">
					<scroll-view scroll-y style="height: 100%;width: 100%;" >
						<view class="page-box">
							<view class="order" v-for="(res, index) in dataList" v-if="res.deal=='待付款'" :key="res.id">
								<view class="top">
									<view class="left">
										<view class="orderID">订单号：{{ res.orderID }}</view>
									</view>
									<view class="right">{{ res.deal }}</view>
								</view>
								
								<view class="mid">
									<view class="left"><image :src="res.goodsUrl" mode="aspectFill"></image></view>
									<view class="content">
										<view class="title u-line-2">{{ res.title }}</view>
										<view class="describe">{{ res.describe }}</view>
										<view class="bookingTime">预约时间 {{ res.bookingTime }}</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{(res.price) }}
										</view>
										<view class="total">合计:
											<text class="total-price">
												￥{{((res.price)) }}
											</text>
										</view>
									</view>
									
								</view>
								
								<view class="bottom">
									<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
									<view class="exchange btn">再来一单</view>
									<view class="evaluate btn">查看详情</view>
								</view>
							</view>
							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" catchtouchmove="stopTouchMove">
					<scroll-view scroll-y style="height: 100%;width: 100%;" >
						<view class="page-box">
							<view class="order" v-for="(res, index) in dataList"  v-if="res.deal=='进行中'" :key="res.id">
								<view class="top">
									<view class="left">
										<view class="orderID">订单号：{{ res.orderID }}</view>
									</view>
									<view class="right">{{ res.deal }}</view>
								</view>
								
								<view class="mid">
									<view class="left"><image :src="res.goodsUrl" mode="aspectFill"></image></view>
									<view class="content">
										<view class="title u-line-2">{{ res.title }}</view>
										<view class="describe">{{ res.describe }}</view>
										<view class="bookingTime">预约时间 {{ res.bookingTime }}</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{(res.price) }}
										</view>
										<view class="total">合计:
											<text class="total-price">
												￥{{((res.price)) }}
											</text>
										</view>
									</view>
									
								</view>
								
								<view class="bottom">
									<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
									<view class="exchange btn">再来一单</view>
									<view class="evaluate btn">查看详情</view>
								</view>
							</view>
							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" catchtouchmove="stopTouchMove">
					<scroll-view scroll-y style="height: 100%;width: 100%;" >
						<view class="page-box">
							<view class="order" v-for="(res, index) in dataList"  v-if="res.deal=='待评价'" :key="res.id">
								<view class="top">
									<view class="left">
										<view class="orderID">订单号：{{ res.orderID }}</view>
									</view>
									<view class="right">{{ res.deal }}</view>
								</view>
								
								<view class="mid">
									<view class="left"><image :src="res.goodsUrl" mode="aspectFill"></image></view>
									<view class="content">
										<view class="title u-line-2">{{ res.title }}</view>
										<view class="describe">{{ res.describe }}</view>
										<view class="bookingTime">预约时间 {{ res.bookingTime }}</view>
									</view>
									<view class="right">
										<view class="price">
											￥{{(res.price) }}
										</view>
										<view class="total">合计:
											<text class="total-price">
												￥{{((res.price)) }}
											</text>
										</view>
									</view>
									
								</view>
								
								<view class="bottom">
									<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
									<view class="evaluate btn">去评价</view>
								</view>
							</view>
							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" catchtouchmove="stopTouchMove">
					<scroll-view scroll-y style="height: 100%;width: 100%;" >
						<view class="page-box">
							<view>
								<view class="centre">
									<image src="/static/my_icon/订单.png" mode=""></image>
									<view class="explain">
										还没有相关的订单呢
									</view>
									<view class="btn" @tap="toIndex()">首页</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
  export default {
    data() {
      return {
        //
        list: [{
            name: "全部订单",
          },
          {
            name: "待付款",
          },
		  {
		    name: "进行中",
		  },
		  {
		    name: "待评价",
		  },
		  {
		    name: "售后/退款",
		  }
        ],
		current:0,
		loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
		orderList:[[],[],[],[]],
		dataList:[
			{
				id:1,
				orderID:215496531,
				deal:'待付款',
				goodsUrl:'/static/logo.png',
				describe:'一大段一大段的描述这个服务',
				title:'家庭保洁',
				bookingTime:'2023年10月1日',
				price:'188',
			},
			{
				id:2,
				orderID:215486531,
				deal:'进行中',
				goodUrl:'/static/logo.png',
				describe:'一大段一大段的描述这个服务',
				title:'家庭保洁',
				bookingTime:'2023年10月1日',
				price:'188',
			},
			{
				id:3,
				orderID:215494531,
				deal:'待评价',
				goodUrl:'/static/logo.png',
				describe:'一大段一大段的描述这个服务',
				title:'家庭保洁',
				bookingTime:'2023年10月1日',
				price:'188',
			},
			{
				id:4,
				orderID:216496531,
				deal:'退款/售后',
				goodUrl:'/static/logo.png',
				describe:'一大段一大段的描述这个服务',
				title:'家庭保洁',
				bookingTime:'2023年10月1日',
				price:'188',
			},
			{
				id:5,
				orderID:214496531,
				deal:'进行中',
				goodUrl:'/static/logo.png',
				describe:'一大段一大段的描述这个服务',
				title:'家庭保洁',
				bookingTime:'2023年10月1日',
				price:'188',
			},
		]

      };
    },
    methods: {
		change(index) {
        this.current = index;
		},
		stopTouchMove:function(){
			return false;
		},
		toIndex(){
			uni.reLaunch({
				url:'/pages/index/index'
			})
			// console.log(1)
		},
		toDetail(id){
			this.$emit("ToDetail",id);
			console.log("dataList",id);
		}
    },
	
  };
</script>

<style lang="scss">
page{
	height: 100%;
	background-color: #f2f2f2;
}

.box{
	height: 100%;
}

.swiper-box{
	// height: 100%;
}

.order{
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	// height: 240rpx;
}
.top {
	display: flex;
	justify-content: space-between;
}
.top .left {
	display: flex;
	align-items: center;
}
.top .left .orderID {
	margin: 0 10rpx;
	font-size: 32rpx;
}

.mid{
	display: flex;
	margin:20rpx 0 0;
}
.mid .left{
	margin-right: 20rpx;
}
.mid .left image{
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
}
.mid .content .title {
	font-size: 36rpx;
	line-height: 50rpx;
}
.mid .content .describe {
	margin: 10rpx 0;
	font-size: 24rpx;
	color: $u-tips-color;
}
.mid .content .bookingTime {
	color: #e5d001;
	font-size: 20rpx;
	margin-top: 40rpx;
}
.mid .right {
	margin-left: 10rpx;
	padding-top: 20rpx;
	text-align: right;
}
.mid .right .number {
	color: $u-tips-color;
	font-size: 24rpx;
}
.total {
	margin-top: 100rpx;
	text-align: right;
	font-size: 24rpx;
}
.total-price {
	font-size: 32rpx;
}
.bottom {
	display: flex;
	margin-top: 40rpx;
	padding: 0 10rpx;
	justify-content: space-between;
	align-items: center;
}
.btn {
	line-height: 52rpx;
	width: 160rpx;
	border-radius: 26rpx;
	border: 2rpx solid $u-border-color;
	font-size: 26rpx;
	text-align: center;
	color: $u-type-info-dark;
}
.evaluate {
	color: $u-type-success-dark;
	border-color: $u-type-success-dark;
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
}
.centre image {
	width: 164rpx;
	height: 164rpx;
	border-radius: 50%;
	margin-bottom: 20rpx;
}
.centre .btn {
	margin: 80rpx auto;
	width: 200rpx;
	border-radius: 32rpx;
	line-height: 64rpx;
	color: #ffffff;
	font-size: 26rpx;
	background: linear-gradient(270deg, rgb(92, 208, 208) 0%, rgb(80, 182, 182) 100%);
}

.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
</style>